<template>
	<view>
		<view class="title">基本资料</view>
		<view class="tips">
			<view class="tips-name">用户名</view>
			<view class="tips-cont">用户名可用于登录。修改点击<text @tap="confirmDialog(0)">这里</text></view>
		</view>
		<input type="text" v-model="nicheng" placeholder="未设置" placeholder-class="inputDefault" disabled="true" />
		<view class="tips">
			<view class="tips-name">个性签名</view>
			<view class="tips-cont">一句话介绍自己，建议少于15字。修改点击<text @tap="confirmDialog(1)">这里</text></view>
		</view>
		<input type="text" v-model="signature" placeholder="未设置" placeholder-class="inputDefault" :maxlength="15" disabled="true" />
		<view class="tips">
			<view class="tips-name">个人抖校</view>
			<view class="tips-cont">属于自己的个人博客，开通个性域名，点击<text @tap="isBlog =! isBlog">这里</text></view>
		</view>
		<view class="blog">
			<view v-if="isBlog">http:</view>
			<view v-else>http://zzedu.cn/</view>
			<input type="text" v-model="blogValue" placeholder="请输入" placeholder-class="inputDefault" :disabled="!isBlog" @blur="createBlog" />
			<view v-if="isBlog">.zzedu.cn/</view>
		</view>
		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" :title="popupTitle" :value="popupValue" :placeholder="popupPlaceholder" :isMax="isMax"
			 :maxInputLength="isMax ? maxLength:'-1'" @confirm="dialogInputConfirm" @close="dialogInputClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopupDialog
		},
		data() {
			return {
				nicheng: uni.getStorageSync('userInfo').nicheng, //用户名
				signature: uni.getStorageSync('userInfo').signature, //个性签名
				isBlog: false,
				blogValue: '', //个人域名
				popupType: 0, //0修改用户名 1修改个性签名
				popupTitle: '', //弹出层标题
				popupValue: '', //弹出层默认值
				popupPlaceholder: '', //弹出层默认显示
				isMax: false, //是否限制长度
				maxLength: 15
			}
		},
		methods: {
			// 打开弹出层
			confirmDialog(index) {
				this.$refs.dialogInput.open();
				this.popupType = index;
				this.isMax = false;
				if (index == 0) { //修改用户名
					this.popupTitle = '修改用户名';
					this.popupValue = this.nicheng;
					this.popupPlaceholder = '请输入';
				} else if (index == 1) { //设置邮箱
					this.isMax = true;
					this.popupTitle = '修改个性签名';
					this.popupValue = this.signature;
					this.popupPlaceholder = '请输入个性签名（建议少于15字）';
				}
			},
			// 弹出层确定点击事件
			dialogInputConfirm(done, val) {
				if (this.popupType == 0) { //修改用户名
					this.updateUserInfo({
						nicheng: val
					});
				} else if (this.popupType == 1) { //修改个性签名
					this.updateUserInfo({
						signature: val
					});
				}
				setTimeout(() => {
					done()
				}, 500)
			},
			// 弹出层取消点击事件
			dialogInputClose() {
				this.isMax = false; //是否限制长度
				this.popupTitle = ''; //弹出层标题
				this.popupValue = ''; //弹出层默认值
				this.popupPlaceholder = ''; //弹出层默认显示
			},
			// 修改个人信息
			updateUserInfo(data) {
				this.$zapi.apiPost('user/currency.basic/UpdateBasic', data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (res.data.code == 200) {
						this.$emit('changeInfo');
						this.GetUserInfo();
					}
				})
			},
			// 获取个人信息替换缓存内容
			GetUserInfo() {
				this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
					uni.setStorageSync('userInfo', res.data.data);
					this.nicheng = uni.getStorageSync('userInfo').nicheng; //用户名
					this.signature = uni.getStorageSync('userInfo').signature; //个性签名
				})
			},
			// 开通博客域名
			createBlog(event) {
				console.log(event.detail.value);
			}
		}
	}
</script>

<style lang="scss">
	.title {
		color: #333333;
		font-size: 32upx;
		font-weight: 500;
	}

	.tips {
		padding: 30upx 0 20upx;

		.tips-name {
			color: #333333;
		}

		.tips-cont {
			display: flex;
			align-items: center;
			color: #999999;
			margin-top: 10upx;

			text {
				color: #FF9900;
			}
		}
	}

	input {
		height: 90upx;
		line-height: 90upx;
		background: #FAFAFA;
		box-shadow: 0upx 4upx 8upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
		text-indent: 20upx;
		margin-bottom: 10upx;
	}

	.inputDefault {
		color: #C0C4CC;
	}

	.blog {
		display: flex;
		align-items: center;

		view {
			color: #333333;
			margin: 0 10upx;
		}

		view:first-child {
			margin-left: 0;
		}
	}
</style>
